@charset "utf-8";
#lottery{
    .logo,.redEnvelope{
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
    .logo{
        width: 55%;
        top: 40px;
        z-index: 2;
        img{
            width: 100%;
        }
    }
    .redEnvelope{
        width: 80%;
        top: 20%;
        z-index: 3;
        img{
            width: 100%;
        }
    }
    span{
        width: 100%;
        text-align: center;
        display: block;
        position: relative;
        bottom: 20%;
        z-index: 3;
        color: white;
    }
    .ball{
        width: 100%;
        position: absolute;
        top: 20%;
        z-index: 4;
        display: none;
        img{
            width: 100%;
        }
    }
}
.yaohuang{
    animation: 1s yaohuang linear;
    transform-origin: center;
}
.xuanzhuan{
    animation: 0.5s xuanzhuan linear;
    transform-origin: center;
    animation-fill-mode: forwards;
}
@keyframes xuanzhuan{
    0%{
        opacity: 0.1;
        transform: rotate(180deg) scale(1);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg) scale(2);
    }
}
@keyframes yaohuang{
    0%{
        transform: rotate(0deg);
    }
    10%{
        transform: rotate(10deg) scale(1.1);
    }
    20%{
        transform: rotate(-10deg) scale(1.1);
    }
    30%{
        transform: rotate(5deg) scale(1.1);
    }
    40%{
        transform: rotate(-5deg) scale(1.1);
    }
    50%{
        transform: rotate(5deg) scale(1.1);
    }
    60%{
        transform: rotate(-5deg) scale(1.1);
    }
    70%{
        transform: rotate(5deg) scale(1.1);
    }
    80%{
        transform: rotate(-5deg) scale(1.1);
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
}